<ion-item-divider>Dependencies</ion-item-divider>
<ion-grid>
  <ion-row>
    <ion-col
      *ngFor="let dep of pkg.manifest.dependencies | keyvalue"
      responsiveCol
      sizeSm="12"
      sizeMd="6"
    >
      <ion-item [routerLink]="['/marketplace', dep.key]">
        <ion-thumbnail slot="start">
          <img
            alt=""
            style="border-radius: 100%"
            [src]="getImg(dep.key) | trustUrl"
          />
        </ion-thumbnail>
        <ion-label>
          <h2>
            {{ pkg['dependency-metadata'][dep.key].title }}
            <ng-container [ngSwitch]="dep.value.requirement.type">
              <span *ngSwitchCase="'required'">(required)</span>
              <span *ngSwitchCase="'opt-out'">(required by default)</span>
              <span *ngSwitchCase="'opt-in'">(optional)</span>
            </ng-container>
          </h2>
          <p>
            <small>{{ dep.value.version | displayEmver }}</small>
          </p>
          <p>{{ dep.value.description }}</p>
        </ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>
